import '../css/todoheader.scss'
import { Button, Input,message } from 'antd';
import { useState } from 'react';
const TodoHeader = (props) => {
  const [messageApi, contextHolder] = message.useMessage()
  const [form, setform] = useState({
    date: '',
    title: '',
    num: ''
  })

  //  日期
  const changedate = (e) => {
    setform({ ...form, date: e.target.value })
  };

  // 标题
  const changetitle = (e) => {
    setform({ ...form, title: e.target.value })
  }

  // 优先级
  const changenum = (e) => {
    setform({ ...form, num: e.target.value })
  }

  // 添加
  const addList = ()=>{
    console.log(form);
    if(form.date==='' || form.title==='' || form.num===''){
      messageApi.open({
        type: 'warning',
        content: '请填写内容',
      });
      return
    }
    let {date,title,num} = form
    props.todolist({date,title,num})//把数据传给父组件
  }
  return (<>
  {contextHolder}
    <div className="TodoHeader">
      <div className="head">
        <span>日期：</span>
        <input type="date" className='input_date' onChange={changedate}/>
        {/* <DatePicker value={form.date} className='date' onChange={changedate} /> */}
      </div>
      <div className="head">
        <span>标题：</span>
        <Input value={form.title} onChange={changetitle} size="large" placeholder="请输入标题" className='input' />
      </div>
      <div className="head">
        <span>优先级：</span>
        <Input value={form.num} onChange={changenum} size="large" placeholder="只能填写数字" />
      </div>
      <Button onClick={addList} className='buttons' type="primary">添加</Button>
    </div>
  </>);
}

export default TodoHeader;